import React,{ Component } from 'react';
import { connect } from 'react-redux';
import  { actionTypes } from './store/index';
import { Icon } from 'antd';
import styles from '../index.less';
class Search extends  Component {
	getListAear(){
		let {searchfocused, handleChangePage,mouseIn,page,list} = this.props;
		const newlist = list.slice(11*(page-1),11*page-1);
		if(searchfocused || mouseIn ){
			return(
				<div className={styles.searchHot}>
					<div className={styles.searchHotInner} >
						<div className ={styles.searchHotTitle}>
							<span style = {{float: 'left'}}>热门搜索</span>
							<a className = {styles.handesStyle} onClick={() => handleChangePage(page,list) }> <Icon type="sync" spin/>  换一批</a>
						</div>
						<div className ={styles.searchHotContent}>
						{ 
							newlist.map((item) =>{
							return <span className={styles.span} key={ item }>{item}</span>})
						}
						</div>
					</div>
					<div className={styles.searchRecent}></div>
				</div>
			)
		}else{
				return null
		}
	};
	render() {
		let {searchfocused ,handleSearchInputBlur,handleSearchInputFocus,handleMouseEnt,handleMouseLeave,list}= this.props;
		return (
			<div onMouseEnter={handleMouseEnt}  onMouseLeave={handleMouseLeave}>
				<div className={styles.search}>
					<input className= { searchfocused ? `${styles.focused} ${styles.searchinput}`: styles.searchinput} onMouseOver={() => handleSearchInputFocus(list)}
						onBlur = {handleSearchInputBlur} placeholder='搜索'>
						</input>
					<span className={ searchfocused ? `${styles.inputFocused} ${styles.searchIconfontArea}` :  styles.searchIconfontArea}>
						<Icon type="search" style={{ fontSize: '16px', color: '#969696' }}/>
					</span>
				</div >
					{this.getListAear(searchfocused) } 
			</div>
		)   
	}
}
const mapStateToProps =(state) =>{
	return {
		searchfocused:state.header.searchfocused,
		list:state.header.list,
		page:state.header.page,
		totalPage:state.header.totalPage,
		mouseIn:state.header.mouseIn,
	}
};
const mapDispatchToTypes = (dispatch) => {
	return{
		handleSearchInputFocus(list){
			( list.length===0 ) && dispatch(actionTypes.getlist())
			dispatch(actionTypes.searchInputFouce())
		},
		handleSearchInputBlur(){
			dispatch(actionTypes.searchInputBlur())
		},
		handleMouseEnt(){
			dispatch(actionTypes.mouseEnt())
		},
		handleMouseLeave(){
			dispatch(actionTypes.mouseOut())
		},
		handleChangePage(page,list){
			const maxPage = Math.ceil(list.length/10);
			if(page < maxPage){
				dispatch(actionTypes.getNextPage(page))
				console.log('page',page)
			}
			else {
				dispatch(actionTypes.getfistPage())
			}
			}
	}
};
export default connect(mapStateToProps, mapDispatchToTypes)(Search);
